<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>login</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
		<link rel="stylesheet" type="text/css" href="css/util.css">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="assets/css/layui.css" />
		<script src="assets/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				layui.use(["layer"], function() {
					var layer = layui.layer;
					$("#login").click(function() {

						var userName = $("#user_name").val();
						var password = $("#password").val();

						if(userName.length == 0 && password.length == 0) {
							layer.alert("请输入用户名和密码")
						}else if(userName.length==0){
							layer.alert("请输入用户名")
						}else if(password.length==0){
							layer.alert("请输入用户名")
						} else if(userName.length < 5 || password.length < 5) {
							layer.alert("用户名和密码不得低于5位")
						} else {
							$.ajax({
								type: "post",
								url: "/login",
								data: "userName=" + userName + "&password=" + password,
								dataType: "json",
								success: function(data) {
									if(data==1){
                                        location.href = "/tomain";
									}else{
                                        layer.alert("用户名或密码错误！")
									}

								}
							});
						}

					})

				})

			})
		</script>

	</head>

	<body>

		<div class="limiter">
			<div class="container-login100" style="background-image: url('img/login_bg.jpg');">
				<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">

					<span class="login100-form-title p-b-49">登录</span>

					<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
						<span class="label-input100">用户名</span>
						<input class="input100" type="text" required="required" id="user_name" name="username" placeholder="请输入用户名" autocomplete="off">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="请输入密码">
						<span class="label-input100">密码</span>
						<input class="input100" type="password" required="required" id="password" name="pass" placeholder="请输入密码">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>

					<div class="text-right p-t-8 p-b-31">
						<!--<a href="javascript:">忘记密码？</a>-->
					</div>

					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button id="login" class="login100-form-btn">登 录</button>
						</div>
					</div>

					

				</div>

			</div>

		</div>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/main.js"></script>
	</body>

</html>